<style lang="less" scoped>
.imgTitle {
  width: 100%;
}
</style>
<style >
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<template>
  <div>
    <Row>
      <Card style="margin-bottom: 10px">
        <Form inline>
          <FormItem style="margin-bottom: 0">
            <Select v-model="searchConf.type" clearable placeholder="请选择状态" style="width:100px">
              <Option :value="1">产品名称</Option>
              <Option :value="2">商户ID</Option>
            </Select>
          </FormItem>
          <FormItem style="margin-bottom: 0">
            <Input style="width:200px" v-model="searchConf.keywords" :placeholder="'请输入选择产品名称关键字'"></Input>
          </FormItem>
          <FormItem style="margin-bottom: 0">
            <Button type="primary" @click="apply">查询/刷新</Button>
            <Button type="primary" @click="reset">重置</Button>
          </FormItem>
        </Form>
      </Card>
    </Row>
    <Row>
      <Col span="24">
        <Card>
          <p slot="title" style="height:40px">
            <Button type="primary" @click="addClass" icon="md-add">新增</Button>
            <!-- <Button type="primary" @click="addExcel" icon="md-add">上传表格</Button> -->
          </p>
          <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            v-loading="loading"
            element-loading-text="数据加载中,请稍后"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" label-width="120px" inline class="demo-table-expand">
                  <el-form-item label="产品id">
                    <span>{{ props.row.productID }}</span>
                  </el-form-item>
                  <el-form-item label="商家id">
                    <span>{{ props.row.masterID }}</span>
                  </el-form-item>
                  <el-form-item label="分类id">
                    <span>{{ props.row.classID }}</span>
                  </el-form-item>
                  <!-- <el-form-item label="分类昵称">
                    <span>{{ props.row.className }}</span>
                  </el-form-item>-->
                  <el-form-item label="商家昵称">
                    <span>{{ props.row.trueName }}</span>
                  </el-form-item>
                  <el-form-item label="产品昵称">
                    <span>{{ props.row.productName }}</span>
                  </el-form-item>
                  <!-- <el-form-item label="重量">
                    <span>{{ props.row.weight }}</span>
                  </el-form-item>-->
                  <!-- <el-form-item label="产品介绍">
                    <span>{{ props.row.content }}</span>
                  </el-form-item>-->
                  <!-- <el-form-item label="成本价">
                    <span>{{ props.row.costPrice }}</span>
                  </el-form-item>-->
                  <el-form-item label="销售价">
                    <span>{{ props.row.salePrice }}</span>
                  </el-form-item>
                  <!-- <el-form-item label="市场价">
                    <span>{{ props.row.marketPrice }}</span>
                  </el-form-item>-->
                  <el-form-item label="排序">
                    <span>{{ props.row.sort }}</span>
                  </el-form-item>
                  <el-form-item label="销量">
                    <span>{{ props.row.salesSum }}</span>
                  </el-form-item>
                  <el-form-item label="库存">
                    <span>{{ props.row.stock }}</span>
                  </el-form-item>
                  <el-form-item label="添加时间">
                    <span>{{ props.row.addTime }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="productID" label="产品id"></el-table-column>
            <el-table-column align="center" prop="masterID" label="商家id"></el-table-column>
            <el-table-column align="center" prop="classID" label="分类id"></el-table-column>
            <el-table-column align="center" prop="productName" label="产品昵称"></el-table-column>
            <!-- <el-table-column align="center" prop="titleImg" label="标题图">
              <template slot-scope="scope">
                <img class="imgTitle" :src="scope.row.titleImg" alt />
              </template>
            </el-table-column>-->
            <el-table-column align="center" prop="salesSum" label="销量"></el-table-column>
            <el-table-column align="center" prop="stock" label="库存"></el-table-column>
            <el-table-column align="center" prop="addTime" label="添加时间"></el-table-column>
            <el-table-column align="center" label="状态">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status==1?true:false"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="switchClick(scope.$index,scope.row)"
                ></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200">
              <template slot-scope="scope">
                <el-button @click="addClass(scope.$index,scope.row)">编辑</el-button>
                <el-button @click="recommendClass(scope.$index,scope.row)">推荐</el-button>

                <el-button @click="deleteButton(scope.$index,scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <x-box :TableListVisible="modalSetting.show" :list="formItem" @hidden="hidden"></x-box>
          <!-- <x-excel :excelVisible="excelVisible" @hidden="hidden"></x-excel> -->
          <div class="margin-top-15" style="text-align: center">
            <Page
              :total="tableShow.listCount"
              :current="tableShow.currentPage"
              :page-size="tableShow.pageSize"
              @on-change="changePage"
              @on-page-size-change="changeSize"
              show-elevator
              show-sizer
              show-total
            ></Page>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
import axios from "axios";
import XBox from "./list_AddOrEdit.vue";
// import XExcel from "./component/goods_Excel.vue";

export default {
  name: "supermarket_merchantsGoods",
  components: { XBox },
  data() {
    return {
      loading: false,
      tableData: [],
      tableClassData: [],
      tableMasterData: [],
      groupList: [],
      excel: "",
      tableShow: {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      },
      searchConf: {
        type: "",
        keywords: "",
        status: ""
      },
      modalSetting: {
        show: false,
        loading: false,
        index: 0
      },
      excelVisible: false,
      formItem: []
    };
  },
  created() {
    // this.init();
    this.getList();
  },
  watch: {
    // 如果路由发生变化，再次执行该方法
    $route: "getList"
  },
  mounted() {},
  methods: {
    apply() {
      this.tableShow = {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      };
      this.getList();
    },
    reset() {
      this.tableShow = {
        currentPage: 1,
        pageSize: 10,
        listCount: 0
      };
      this.searchConf.type = "";
      this.searchConf.keywords = "";
      this.getList();
    },
    recommendClass(index, row) {
      this.$prompt("请输入推荐排序", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[0-9]+$/,
        inputErrorMessage: "只能输入数字，0为不取消推荐",
        inputPlaceholder: "只能输入数字，0为不取消推荐"
      })
        .then(({ value }) => {
          axios
            .post("MallProduct/setrecommendSort", {
              productID: row.productID,
              recommendSort: value
            })
            .then(response => {
              if (response.data.code === 1) {
                this.$message({
                  type: "success",
                  message: response.data.msg,
                  offset: 100
                });
                this.getList();
              } else {
                this.$message({
                  type: "error",
                  message: response.data.msg,
                  offset: 100
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    },
    addExcel() {
      this.excelVisible = true;
    },
    switchClick(index, row) {
      axios
        .post("MallProduct/setStatus", {
          productID: row.productID,
          status: row.status == 1 ? 0 : 1
        })
        .then(response => {
          if (response.data.code === 1) {
            this.$message({
              type: "success",
              message: response.data.msg,
              offset: 100
            });
            this.getList();
          } else {
            this.$message({
              type: "error",
              message: response.data.msg,
              offset: 100
            });
          }
        });
    },
    hidden() {
      this.formItem = {};
      this.modalSetting.show = false;
      this.excelVisible = false;
      this.getList();
    },
    addClass(index, row) {
      if (row) {
        this.formItem = row;
        this.modalSetting.show = true;
      } else {
        this.modalSetting.show = true;
        this.formItem = {};
      }
    },
    deleteButton(index, row) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          axios
            .post("MallProduct/delProduct", {
              productID: row.productID
            })
            .then(response => {
              this.$message({
                type: "success",
                message: response.data.msg,
                offset: 100
              });
              this.getList();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
            offset: 100
          });
        });
    },
    cancel() {
      this.modalSetting.show = false;
      this.getList();
    },

    changePage(page) {
      this.tableShow.currentPage = page;
      this.getList();
    },
    changeSize(size) {
      this.tableShow.pageSize = size;
      this.getList();
    },
    search() {
      this.tableShow.currentPage = 1;
      this.getList();
    },
    getList() {
      let vm = this;
      vm.loading = true;
      let arr = ["", "productName", "masterID"];
      let obj = {
        page: vm.tableShow.currentPage,
        size: vm.tableShow.pageSize
      };
      obj[arr[this.searchConf.type]] = vm.searchConf.keywords;
      for (let i in obj) {
        obj[i] ? obj[i] : delete obj[i];
      }
      axios.post("MallProduct/index", obj).then(function(response) {
        let res = response.data;
        if (res.code === 1) {
          vm.tableData = res.data.list;
          vm.tableShow.listCount = res.data.count;
        } else {
          if (res.code === -14) {
            vm.$store.commit("logout", vm);
            vm.$router.push({
              name: "login"
            });
          } else {
            vm.$message({
              message: res.msg,
              offset: 100,
              type: "error"
            });
          }
        }
        vm.loading = false;
      });
    }
  }
};
</script>
